<{extend name="Public:public" /}>

<{block name="title"}>状态过渡<{/block}>

<{block name="content"}> 
<div class="content guide with-sidebar transitioning-state-guide">
  
    
      <div id="ad">
  <!-- <script
    async
    type="text/javascript"
    src="//cdn.carbonads.com/carbon.js?serve=CKYIK2QU&placement=vuejsorg"
    id="_carbonads_js">
  </script> -->
  <a href="https://studio.qcloud.coding.net/campaign/favorite-plugins/?utm_source=vue.js&amp;utm_content=ad1116" target="_blank">
    <img src="/images/coding-net-ad.jpg">
  </a>
</div>

    
  
  
    <h1>状态过渡</h1>
  
  
    <p>Vue 的过渡系统提供了非常多简单的方法设置进入、离开和列表的动效。那么对于数据元素本身的动效呢，比如：</p>
<ul>
<li>数字和运算</li>
<li>颜色的显示</li>
<li>SVG 节点的位置</li>
<li>元素的大小和其他的属性</li>
</ul>
<p>所有的原始数字都被事先存储起来，可以直接转换到数字。做到这一步，我们就可以结合 Vue 的响应式和组件系统，使用第三方库来实现切换元素的过渡状态。</p>
<h2 id="状态动画与侦听器"><a href="#状态动画与侦听器" class="headerlink" title="状态动画与侦听器" data-scroll="">状态动画与侦听器</a></h2><p>通过侦听器我们能监听到任何数值属性的数值更新。可能听起来很抽象，所以让我们先来看看使用 <a href="https://greensock.com/" target="_blank" rel="noopener">GreenSock</a> 一个例子：</p>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"animated-number-demo"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">input</span> <span class="attr">v-model.number</span>=<span class="string">"number"</span> <span class="attr">type</span>=<span class="string">"number"</span> <span class="attr">step</span>=<span class="string">"20"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>{{ animatedNumber }}<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="keyword">new</span> Vue({</span><br><span class="line">  el: <span class="string">'#animated-number-demo'</span>,</span><br><span class="line">  data: {</span><br><span class="line">    number: <span class="number">0</span>,</span><br><span class="line">    tweenedNumber: <span class="number">0</span></span><br><span class="line">  },</span><br><span class="line">  computed: {</span><br><span class="line">    animatedNumber: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line">      <span class="keyword">return</span> <span class="keyword">this</span>.tweenedNumber.toFixed(<span class="number">0</span>);</span><br><span class="line">    }</span><br><span class="line">  },</span><br><span class="line">  watch: {</span><br><span class="line">    number: <span class="function"><span class="keyword">function</span>(<span class="params">newValue</span>) </span>{</span><br><span class="line">      TweenLite.to(<span class="keyword">this</span>.$data, <span class="number">0.5</span>, { <span class="attr">tweenedNumber</span>: newValue });</span><br><span class="line">    }</span><br><span class="line">  }</span><br><span class="line">})</span><br></pre></td></tr></tbody></table></figure>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<div id="animated-number-demo" class="demo"><input type="number" step="20"> <p>0</p></div>
<script>
new Vue({
  el: '#animated-number-demo',
  data: {
    number: 0,
    tweenedNumber: 0
  },
  computed: {
    animatedNumber: function() {
      return this.tweenedNumber.toFixed(0);
    }
  },
  watch: {
    number: function(newValue) {
      TweenLite.to(this.$data, 0.5, { tweenedNumber: newValue });
    }
  }
})
</script>

<p>当你把数值更新时，就会触发动画。这个是一个不错的演示，但是对于不能直接像数字一样存储的值，比如 CSS 中的 color 的值，通过下面的例子我们来通过 <a href="https://github.com/tweenjs/tween.js" target="_blank" rel="noopener">Tween.js</a> 和 <a href="https://github.com/brehaut/color-js" target="_blank" rel="noopener">Color.js</a> 实现一个例子：</p>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/npm/tween.js@16.3.4"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/npm/color-js@1.0.3"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"example-7"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">input</span></span></span><br><span class="line"><span class="tag">    <span class="attr">v-model</span>=<span class="string">"colorQuery"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">v-on:keyup.enter</span>=<span class="string">"updateColor"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">placeholder</span>=<span class="string">"Enter a color"</span></span></span><br><span class="line"><span class="tag">  &gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string">"updateColor"</span>&gt;</span>Update<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>Preview:<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">span</span></span></span><br><span class="line"><span class="tag">    <span class="attr">v-bind:style</span>=<span class="string">"{ backgroundColor: tweenedCSSColor }"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">class</span>=<span class="string">"example-7-color-preview"</span></span></span><br><span class="line"><span class="tag">  &gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>{{ tweenedCSSColor }}<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> Color = net.brehaut.Color</span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> Vue({</span><br><span class="line">  el: <span class="string">'#example-7'</span>,</span><br><span class="line">  data: {</span><br><span class="line">    colorQuery: <span class="string">''</span>,</span><br><span class="line">    color: {</span><br><span class="line">      red: <span class="number">0</span>,</span><br><span class="line">      green: <span class="number">0</span>,</span><br><span class="line">      blue: <span class="number">0</span>,</span><br><span class="line">      alpha: <span class="number">1</span></span><br><span class="line">    },</span><br><span class="line">    tweenedColor: {}</span><br><span class="line">  },</span><br><span class="line">  created: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line">    <span class="keyword">this</span>.tweenedColor = <span class="built_in">Object</span>.assign({}, <span class="keyword">this</span>.color)</span><br><span class="line">  },</span><br><span class="line">  watch: {</span><br><span class="line">    color: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line">      <span class="function"><span class="keyword">function</span> <span class="title">animate</span> (<span class="params"></span>) </span>{</span><br><span class="line">        <span class="keyword">if</span> (TWEEN.update()) {</span><br><span class="line">          requestAnimationFrame(animate)</span><br><span class="line">        }</span><br><span class="line">      }</span><br><span class="line"></span><br><span class="line">      <span class="keyword">new</span> TWEEN.Tween(<span class="keyword">this</span>.tweenedColor)</span><br><span class="line">        .to(<span class="keyword">this</span>.color, <span class="number">750</span>)</span><br><span class="line">        .start()</span><br><span class="line"></span><br><span class="line">      animate()</span><br><span class="line">    }</span><br><span class="line">  },</span><br><span class="line">  computed: {</span><br><span class="line">    tweenedCSSColor: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line">      <span class="keyword">return</span> <span class="keyword">new</span> Color({</span><br><span class="line">        red: <span class="keyword">this</span>.tweenedColor.red,</span><br><span class="line">        green: <span class="keyword">this</span>.tweenedColor.green,</span><br><span class="line">        blue: <span class="keyword">this</span>.tweenedColor.blue,</span><br><span class="line">        alpha: <span class="keyword">this</span>.tweenedColor.alpha</span><br><span class="line">      }).toCSS()</span><br><span class="line">    }</span><br><span class="line">  },</span><br><span class="line">  methods: {</span><br><span class="line">    updateColor: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line">      <span class="keyword">this</span>.color = <span class="keyword">new</span> Color(<span class="keyword">this</span>.colorQuery).toRGB()</span><br><span class="line">      <span class="keyword">this</span>.colorQuery = <span class="string">''</span></span><br><span class="line">    }</span><br><span class="line">  }</span><br><span class="line">})</span><br></pre></td></tr></tbody></table></figure>
<figure class="highlight css"><table><tbody><tr><td class="code"><pre><span class="line"><span class="selector-class">.example-7-color-preview</span> {</span><br><span class="line">  <span class="attribute">display</span>: inline-block;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">50px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">50px</span>;</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>

<script src="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"></script>
<script src="https://cdn.jsdelivr.net/npm/color-js@1.0.3"></script>
<div id="example-7" class="demo"><input placeholder="Enter a color"> <button>Update</button> <p>Preview:</p> <span class="example-7-color-preview" style="background-color: rgb(0, 0, 0);"></span> <p>#000000</p></div>
<script>
var Color = net.brehaut.Color
new Vue({
  el: '#example-7',
  data: {
    colorQuery: '',
    color: {
      red: 0,
      green: 0,
      blue: 0,
      alpha: 1
    },
    tweenedColor: {}
  },
  created: function () {
    this.tweenedColor = Object.assign({}, this.color)
  },
  watch: {
    color: function () {
      function animate () {
        if (TWEEN.update()) {
          requestAnimationFrame(animate)
        }
      }

      new TWEEN.Tween(this.tweenedColor)
        .to(this.color, 750)
        .start()

      animate()
    }
  },
  computed: {
    tweenedCSSColor: function () {
      return new Color({
        red: this.tweenedColor.red,
        green: this.tweenedColor.green,
        blue: this.tweenedColor.blue,
        alpha: this.tweenedColor.alpha
      }).toCSS()
    }
  },
  methods: {
    updateColor: function () {
      this.color = new Color(this.colorQuery).toRGB()
      this.colorQuery = ''
    }
  }
})
</script>
<style>
.example-7-color-preview {
  display: inline-block;
  width: 50px;
  height: 50px;
}
</style>

<h2 id="动态状态过渡"><a href="#动态状态过渡" class="headerlink" title="动态状态过渡" data-scroll="">动态状态过渡</a></h2><p>就像 Vue 的过渡组件一样，数据背后状态过渡会实时更新，这对于原型设计十分有用。当你修改一些变量，即使是一个简单的 SVG 多边形也可实现很多难以想象的效果。</p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenLite.min.js"></script>
<div id="svg-polygon-demo" class="demo"><svg width="200" height="200" class="demo-svg"><polygon points="100,45.09889119999998 146.41985149758224,36.10855564777106 152.21255080254738,83.0351138536911 156.06636343279723,118.2170657754682 133.46016428896488,146.0539651833264 100.00000000000001,176.0489704 66.01036345805211,146.78272121972344 19.754493452082286,126.07334561160512 38.157361718717404,79.90610875540416 52.78649875404694,35.016190482927016" class="demo-polygon"></polygon> <circle cx="100" cy="100" r="90" class="demo-circle"></circle></svg> <label>Sides: 10</label> <input type="range" min="3" max="500" class="demo-range-input"> <label>Minimum Radius: 50%</label> <input type="range" min="0" max="90" class="demo-range-input"> <label>Update Interval: 500 milliseconds</label> <input type="range" min="10" max="2000" class="demo-range-input"></div>
<script>
new Vue({
  el: '#svg-polygon-demo',
  data: function () {
    var defaultSides = 10
    var stats = Array.apply(null, { length: defaultSides })
      .map(function () { return 100 })
    return {
      stats: stats,
      points: generatePoints(stats),
      sides: defaultSides,
      minRadius: 50,
      interval: null,
      updateInterval: 500
    }
  },
  watch: {
    sides: function (newSides, oldSides) {
      var sidesDifference = newSides - oldSides
      if (sidesDifference > 0) {
        for (var i = 1; i <= sidesDifference; i++) {
          this.stats.push(this.newRandomValue())
        }
      } else {
        var absoluteSidesDifference = Math.abs(sidesDifference)
        for (var i = 1; i <= absoluteSidesDifference; i++) {
          this.stats.shift()
        }
      }
    },
    stats: function (newStats) {
      TweenLite.to(
        this.$data,
        this.updateInterval / 1000,
        { points: generatePoints(newStats) }
      )
    },
    updateInterval: function () {
      this.resetInterval()
    }
  },
  mounted: function () {
    this.resetInterval()
  },
  methods: {
    randomizeStats: function () {
      var vm = this
      this.stats = this.stats.map(function () {
        return vm.newRandomValue()
      })
    },
    newRandomValue: function () {
      return Math.ceil(this.minRadius + Math.random() * (100 - this.minRadius))
    },
    resetInterval: function () {
      var vm = this
      clearInterval(this.interval)
      this.randomizeStats()
      this.interval = setInterval(function () {
        vm.randomizeStats()
      }, this.updateInterval)
    }
  }
})

function valueToPoint (value, index, total) {
  var x     = 0
  var y     = -value * 0.9
  var angle = Math.PI * 2 / total * index
  var cos   = Math.cos(angle)
  var sin   = Math.sin(angle)
  var tx    = x * cos - y * sin + 100
  var ty    = x * sin + y * cos + 100
  return { x: tx, y: ty }
}

function generatePoints (stats) {
  var total = stats.length
  return stats.map(function (stat, index) {
    var point = valueToPoint(stat, index, total)
    return point.x + ',' + point.y
  }).join(' ')
}
</script>
<style>
.demo-svg { display: block; }
.demo-polygon { fill: #41B883; }
.demo-circle {
  fill: transparent;
  stroke: #35495E;
}
.demo-range-input {
  display: block;
  width: 100%;
  margin-bottom: 15px;
}
</style>

<p>上述 demo 背后的代码可以通过<a href="https://jsfiddle.net/chrisvfritz/65gLu2b6/" target="_blank" rel="noopener">这个 fiddle</a> 进行详阅。</p>
<h2 id="把过渡放到组件里"><a href="#把过渡放到组件里" class="headerlink" title="把过渡放到组件里" data-scroll="">把过渡放到组件里</a></h2><p>管理太多的状态过渡会很快的增加 Vue 实例或者组件的复杂性，幸好很多的动画可以提取到专用的子组件。<br>我们来将之前的示例改写一下：</p>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/npm/tween.js@16.3.4"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"example-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">input</span> <span class="attr">v-model.number</span>=<span class="string">"firstNumber"</span> <span class="attr">type</span>=<span class="string">"number"</span> <span class="attr">step</span>=<span class="string">"20"</span>&gt;</span> +</span><br><span class="line">  <span class="tag">&lt;<span class="name">input</span> <span class="attr">v-model.number</span>=<span class="string">"secondNumber"</span> <span class="attr">type</span>=<span class="string">"number"</span> <span class="attr">step</span>=<span class="string">"20"</span>&gt;</span> =</span><br><span class="line">  {{ result }}</span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">animated-integer</span> <span class="attr">v-bind:value</span>=<span class="string">"firstNumber"</span>&gt;</span><span class="tag">&lt;/<span class="name">animated-integer</span>&gt;</span> +</span><br><span class="line">    <span class="tag">&lt;<span class="name">animated-integer</span> <span class="attr">v-bind:value</span>=<span class="string">"secondNumber"</span>&gt;</span><span class="tag">&lt;/<span class="name">animated-integer</span>&gt;</span> =</span><br><span class="line">    <span class="tag">&lt;<span class="name">animated-integer</span> <span class="attr">v-bind:value</span>=<span class="string">"result"</span>&gt;</span><span class="tag">&lt;/<span class="name">animated-integer</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="comment">// 这种复杂的补间动画逻辑可以被复用</span></span><br><span class="line"><span class="comment">// 任何整数都可以执行动画</span></span><br><span class="line"><span class="comment">// 组件化使我们的界面十分清晰</span></span><br><span class="line"><span class="comment">// 可以支持更多更复杂的动态过渡</span></span><br><span class="line"><span class="comment">// 策略。</span></span><br><span class="line">Vue.component(<span class="string">'animated-integer'</span>, {</span><br><span class="line">  template: <span class="string">'&lt;span&gt;{{ tweeningValue }}&lt;/span&gt;'</span>,</span><br><span class="line">  props: {</span><br><span class="line">    value: {</span><br><span class="line">      type: <span class="built_in">Number</span>,</span><br><span class="line">      required: <span class="literal">true</span></span><br><span class="line">    }</span><br><span class="line">  },</span><br><span class="line">  data: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line">    <span class="keyword">return</span> {</span><br><span class="line">      tweeningValue: <span class="number">0</span></span><br><span class="line">    }</span><br><span class="line">  },</span><br><span class="line">  watch: {</span><br><span class="line">    value: <span class="function"><span class="keyword">function</span> (<span class="params">newValue, oldValue</span>) </span>{</span><br><span class="line">      <span class="keyword">this</span>.tween(oldValue, newValue)</span><br><span class="line">    }</span><br><span class="line">  },</span><br><span class="line">  mounted: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line">    <span class="keyword">this</span>.tween(<span class="number">0</span>, <span class="keyword">this</span>.value)</span><br><span class="line">  },</span><br><span class="line">  methods: {</span><br><span class="line">    tween: <span class="function"><span class="keyword">function</span> (<span class="params">startValue, endValue</span>) </span>{</span><br><span class="line">      <span class="keyword">var</span> vm = <span class="keyword">this</span></span><br><span class="line">      <span class="function"><span class="keyword">function</span> <span class="title">animate</span> (<span class="params"></span>) </span>{</span><br><span class="line">        <span class="keyword">if</span> (TWEEN.update()) {</span><br><span class="line">          requestAnimationFrame(animate)</span><br><span class="line">        }</span><br><span class="line">      }</span><br><span class="line"></span><br><span class="line">      <span class="keyword">new</span> TWEEN.Tween({ <span class="attr">tweeningValue</span>: startValue })</span><br><span class="line">        .to({ <span class="attr">tweeningValue</span>: endValue }, <span class="number">500</span>)</span><br><span class="line">        .onUpdate(<span class="function"><span class="keyword">function</span> (<span class="params">object</span>) </span>{</span><br><span class="line">          vm.tweeningValue = object.tweeningValue.toFixed(<span class="number">0</span>)</span><br><span class="line">        })</span><br><span class="line">        .start()</span><br><span class="line"></span><br><span class="line">      animate()</span><br><span class="line">    }</span><br><span class="line">  }</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="comment">// 所有的复杂度都已经从 Vue 的主实例中移除！</span></span><br><span class="line"><span class="keyword">new</span> Vue({</span><br><span class="line">  el: <span class="string">'#example-8'</span>,</span><br><span class="line">  data: {</span><br><span class="line">    firstNumber: <span class="number">20</span>,</span><br><span class="line">    secondNumber: <span class="number">40</span></span><br><span class="line">  },</span><br><span class="line">  computed: {</span><br><span class="line">    result: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line">      <span class="keyword">return</span> <span class="keyword">this</span>.firstNumber + <span class="keyword">this</span>.secondNumber</span><br><span class="line">    }</span><br><span class="line">  }</span><br><span class="line">})</span><br></pre></td></tr></tbody></table></figure>

<script src="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"></script>
<div id="example-8" class="demo"><input type="number" step="20"> +
  <input type="number" step="20"> =
  60
  <p><span>20</span> +
    <span>40</span> =
    <span>60</span></p></div>
<script>
Vue.component('animated-integer', {
  template: '<span>{{ tweeningValue }}</span>',
  props: {
    value: {
      type: Number,
      required: true
    }
  },
  data: function () {
    return {
      tweeningValue: 0
    }
  },
  watch: {
    value: function (newValue, oldValue) {
      this.tween(oldValue, newValue)
    }
  },
  mounted: function () {
    this.tween(0, this.value)
  },
  methods: {
    tween: function (startValue, endValue) {
      var vm = this
      function animate () {
        if (TWEEN.update()) {
          requestAnimationFrame(animate)
        }
      }

      new TWEEN.Tween({ tweeningValue: startValue })
        .to({ tweeningValue: endValue }, 500)
        .onUpdate(function () {
          vm.tweeningValue = this.tweeningValue.toFixed(0)
        })
        .start()

      animate()
    }
  }
})
new Vue({
  el: '#example-8',
  data: {
    firstNumber: 20,
    secondNumber: 40
  },
  computed: {
    result: function () {
      return this.firstNumber + this.secondNumber
    }
  }
})
</script>

<p>我们能在组件中结合使用这一节讲到各种过渡策略和 Vue <a href="transitions.html">内建的过渡系统</a>。总之，对于完成各种过渡动效几乎没有阻碍。</p>
<h2 id="赋予设计以生命"><a href="#赋予设计以生命" class="headerlink" title="赋予设计以生命" data-scroll="">赋予设计以生命</a></h2><p>只要一个动画，就可以带来生命。不幸的是，当设计师创建图标、logo 和吉祥物的时候，他们交付的通常都是图片或静态的 SVG。所以，虽然 GitHub 的章鱼猫、Twitter 的小鸟以及其它许多 logo 类似于生灵，它们看上去实际上并不是活着的。</p>
<p>Vue 可以帮到你。因为 SVG 的本质是数据，我们只需要这些动物兴奋、思考或警戒的样例。然后 Vue 就可以辅助完成这几种状态之间的过渡动画，来制作你的欢迎页面、加载指示、以及更加带有情感的提示。</p>
<p>Sarah Drasner 展示了下面这个 demo，这个 demo 结合了时间和交互相关的状态改变：</p>
<p></p><div class="cp_embed_wrapper"><iframe id="cp_embed_YZBGNp" src="//codepen.io/sdras/embed/YZBGNp?height=265&amp;theme-id=light&amp;slug-hash=YZBGNp&amp;default-tab=result&amp;user=sdras&amp;embed-version=2&amp;pen-title=Vue-controlled%20Wall-E" scrolling="no" frameborder="0" height="265" allowtransparency="true" allowfullscreen="true" allowpaymentrequest="true" name="CodePen Embed" title="Vue-controlled Wall-E" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div><p></p>
<script async="" src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

  
  
    <div class="guide-links">
      
      
        <span>← <a href="/v2/guide/transitions.html">进入/离开 &amp; 列表过渡</a></span>
      
      
      
        <span style="float: right;"><a href="/v2/guide/mixins.html">混入</a> →</span>
      
    </div>
  
  <div class="footer">
      <script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
<div class="bsa-cpc"></div>
<script>
  (function(){
    if(typeof _bsa !== 'undefined' && _bsa) {
    _bsa.init('default', 'CKYD62QM', 'placement:vuejsorg', {
      target: '.bsa-cpc',
      align: 'horizontal',
      disable_css: 'true'
    });
      }
  })();
</script>

    发现错误？想参与编辑？
    <a href="https://github.com/vuejs/cn.vuejs.org/blob/master/src/v2/guide/transitioning-state.md" target="_blank">
      在 GitHub 上编辑此页！
    </a>
  </div>
</div>
<{/block}>
